import React, {Component} from 'react';
import './style/index.less'
import {Menu, Dropdown, Breadcrumb} from 'antd';
import {DownOutlined} from '@ant-design/icons';
import {getStorageItem} from "../untils/auth";
import routers from "../router/routers";
import {withRouter, Router,} from "react-router";
import {Link} from 'react-router-dom'

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            historyList: [],
            name: ''
        }
    }

    componentDidMount() {
        // this.setState({
        //     name: JSON.parse(getStorageItem('userInfo') ? getStorageItem('userInfo') : '').account
        // })
    }

    render() {
        const menu = (
            <Menu>
                <Menu.Item>
                    <a onClick={this.loginOut}>
                        退出登录
                    </a>
                </Menu.Item>
            </Menu>
        )
        return (
            <div className='header'>
                <div className='breadcrumb'>
                    <Breadcrumb>
                        {this.changeBreadcrumb()}
                    </Breadcrumb>
                </div>
                <div className='loginOut'>
                    <Dropdown style={{float: "right"}} overlay={menu} trigger='click'>
                        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                            {this.getUserName()}
                            <DownOutlined style={{marginLeft: '5px'}}/>
                        </a>
                    </Dropdown>
                </div>
            </div>
        );
    }

    changeBreadcrumb = () => {
        let breadcrumbObj = {}
        const breadcrumbArr = (data) => data.forEach((item, index) => {
            breadcrumbObj[item.path] = item.name
            if (item.children) {
                breadcrumbArr(item.children)
            }
        })
        breadcrumbArr(routers)
        const {location} = this.props
        const pathSnippets = location.pathname.split('/').filter(i => i);
        const extraBreadcrumbItems = pathSnippets.map((_, index) => {
            const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
            return (
                <Breadcrumb.Item key={url}>
                    <Link to={url}>{breadcrumbObj[url]}</Link>
                </Breadcrumb.Item>
            );
        });
        return extraBreadcrumbItems
    }

    getUserName() {
        return getStorageItem('userInfo') ? JSON.parse(getStorageItem('userInfo')).account : ''
    }

    loginOut = () => {
        sessionStorage.clear()
        this.props.history.push('/login')
    }


}

export default withRouter(Header)
